<template>
  <b-row>
    <b-col class="pr-1 mb-1 col-auto" :class="{'pl-0':(index+1)%3 == 2 || (index+1)%3 == 0}" v-for="(u,index) in url" :key="u.id+createId()">
      <viewer>
        <b-img-lazy blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp" class="rounded-lg border shadow-sm img"
          height="135" width="135" :src="u" />
      </viewer>
    </b-col>
  </b-row>
</template>
<script>
import { nanoid } from 'nanoid';
export default {
  props: {
    img: String,
  },
  data() {
    return {
      url: [],
    }
  },
  mounted() {
    this.url = this.img.split(",");
    console.log(this.img.split(","));
  },
  methods: {
    createId() {
      return nanoid(4);
    }
  },
}
</script>
<style scoped>
.img:hover {
  filter: alpha(Opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  cursor: pointer;
}
</style>
